<template>
  <div>
      <el-dialog
        width="70%"
        title="奖金项拆分"
        :visible.sync="chaivisible"
        :close-on-click-modal="false"
        v-if='chaivisible'
        @close='close'
        append-to-body>
        <div>
            <!-- <div style="text-align:right;margin-bottom:10px;">
                <el-button type="primary" plain>保存模板</el-button>
                <el-button type="primary" plain>调用模板</el-button>
            </div> -->
            <el-popover
                placement="top-start"
                width="600"
                trigger="hover"
                v-if="renTable.length>0"
               >
                 <el-table
                        :data="renTable"
                        border
                        height="300px"
                        >
                       <el-table-column
                         prop="ryCode"
                         min-width="80"
                         label="人员编号">
                       </el-table-column>
                        <el-table-column
                            prop="ryName"
                            min-width="80"
                            label="姓名">
                        </el-table-column>
                       <el-table-column
                         prop="jjxMc"
                         min-width="120"
                         label="奖金项名称">
                       </el-table-column>
                        <el-table-column
                            prop="jjJe"
                            min-width="80"
                            label="金额">
                        </el-table-column>
                       <el-table-column
                         prop="jjSm"
                         min-width="100"
                         label="备注">
                       </el-table-column>
                 </el-table>
                <el-button icon="el-icon-info" type="warning" slot="reference">定向人员</el-button>
            </el-popover>
            <div class="boxsty zhiBiao popover-style-parent-div" style="margin-top:10px;">
            <el-col :span="24">
                <el-form :model="form">

                <el-col :span="14" :style="{height: colHeightTwo,overflow:'hidden'}">
                    <el-form-item label="拆分奖金项:">
                        <el-checkbox-group v-model="form.bonus" @change="handleCheckedCitiesChange">
                            <el-checkbox v-for="item in bonusList" :key="item.id" :label="item.id">{{item.jjxMc}}</el-checkbox>
                        </el-checkbox-group>
                    <el-button type="primary" plain @click="addJjx()">新增奖金项</el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="10">
                    <el-popover
                    placement="bottom-end"
                    title="拆分奖金项"
                    width="900"
                    trigger="hover"
                    v-model="visiblePopover2">
                    <el-form-item>
                        <el-checkbox-group v-model="form.bonus" @change="handleCheckedCitiesChange">
                        <el-checkbox v-for="item in bonusList" :key="item.id" :label="item.id">{{item.jjxMc}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                    <el-button slot="reference" type="text" @click="visiblePopover2 = !visiblePopover2">更多<i :class="visiblePopover2?'el-icon-arrow-down':'el-icon-arrow-right'"></i></el-button>
                    </el-popover>
                    <!-- <el-button type="primary" plain @click="addOrUpdateHandle()">添加</el-button> -->
                    <el-button type="primary" plain @click="addOrUpdateHandle()">确认拆分</el-button>
                    <el-button type="primary" plain @click="noBreak()">不拆分</el-button>
                    <el-button type="warning" plain @click="bonusPools()">选择奖金池</el-button>
                </el-col>
                </el-form>
            </el-col>
        </div>
        </div>
        <el-row :gutter="20">
            <el-col :span="24" class="jjxBox" style="margin-top:20px;">
                <!-- <el-checkbox-group v-model="checkList">
                    <el-checkbox v-for="item in jjList" :key="item.id" :label="item.id">{{item.jjxMc}}<span style="color:#ff3300;font-size:14px;">奖金剩余金额{{item.jjxJe}}元</span>
                            <el-table
                                :data="item.cfDetail"
                                border
                                max-height="350"
                                style="width: 300px; margin-top: 20px;">
                                <el-table-column
                                prop="jjxMc"
                                label="奖项">
                                </el-table-column>
                                <el-table-column
                                prop="jjJe"
                                label="金额">
                                <template slot-scope="scope">
                                <el-input v-model="scope.row.jjJe" type="number" @change.prevent="changejjJe(item)" placeholder=""></el-input>
                                </template>
                                </el-table-column>
                            </el-table>
                    </el-checkbox>
                </el-checkbox-group> -->
                <el-col :span="6" v-for="item in jjList">
                    <el-checkbox :key="item.id" v-model="item.checked" :disabled='item.hfStatus!=0' :label="item.id" @change='changeJjx(item)'>{{item.jjxMc}}<span v-if="item.sfZx=='否'" style="color:#ff3300;font-size:14px;">金额{{item.jjxSyje}}元</span><span v-else  style="color:#ff3300;font-size:14px;">该项奖金为专项奖,金额{{item.jjxSyje}}元</span></el-checkbox>
                    <el-table
                        :data="item.cfList"
                        border
                        max-height="350"
                        style="width: 300px; margin-top: 20px;">
                        <el-table-column
                        prop="jjxMc"
                        min-width="120"
                        label="奖项">

                            <template scope="scope">
                                <span>{{scope.row.jjxMc}}</span><i @click="deleteCf(scope.row)" class="el-icon-delete" style="color:#409eff;cursor: pointer;"></i>
                            </template>

                        </el-table-column>
                        <el-table-column
                        prop="jjJe"
                        label="金额">
                        <template slot-scope="scope">
                        <el-input v-model="scope.row.jjJe" type="number" :disabled='item.hfStatus!=0||scope.row.isJjc==1' @change="changejjJe(item)" placeholder=""></el-input>
                        </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-col>
        </el-row>

        <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="close">确 认</el-button>
        <el-button @click="close()">取 消</el-button>
        </div>
    </el-dialog>
    <!-- 弹窗, 新增 / 修改 -->
    <table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="fngetJjDeptJjx"></table-form>
    <!--查看剩余奖金池列表-->
    <bonusPoolsForm ref="bonusPools" @bonusPoolsChild='bonusPoolsChild'></bonusPoolsForm>
  </div>
</template>

<script>
import {getJjDeptJjx,jiangjinFqmxb,jiangjinFqmxbSave, deleteCf,getDXList,isOrNotExcess,saveNotCf} from "@/api/jiangjin/jiangjinjjxxxb"
import TableForm from '@/views/jiangjin/jiangjinjjxxxb/jiangjinjjxxxb-form'
import bonusPoolsForm from './bonusPools'
export default {
    components: {
        TableForm,
        bonusPoolsForm
    },
    data(){
        return{
            chaivisible:false,
            colHeightTwo:"40px",
            form:{
                bonus:[]
            },
            visiblePopover2:false,
            bonusList:[],
            tableData:[],
            radio:'1',
            jjList:[],
            fId:"",
            checkList:[],
            isZx:false,
            cfLx:'',
            renTable:[],
            pId:"",
            jjJe:[],
            addOrUpdateVisible:false
        }
    },
    methods:{
        //奖金池
        bonusPools(){
            this.checkList=[]
            this.jjList.forEach(item=>{
               if(item.checked){
                   this.checkList.push(item.id)
               }
            })
            if(this.checkList.length==0){
                this.$message.closeAll()
                this.$message.warning('请先选择哪个奖金项!')
                return false;
            }
            if(this.checkList.length>1){
                this.$message.closeAll()
                this.$message.warning('只能选择一个奖金项!')
                return false;
            }
            this.$nextTick(()=>{
                this.$refs.bonusPools.init(this.jjDeptId,this.checkList,this.cfLx)
            })
        },
        //奖金池子集返回来数据
        bonusPoolsChild(bonusPoolsChild){
            this.getChudata()
        },
        deleteCf(row){
            deleteCf(row).then(res => {
                this.$message.closeAll()
                this.$message.error("成功删除")
                this.getChudata()
            })
        },
        init(jjDeptId,rowId,rowPid,cfLx){
            this.chaivisible=true;
            this.cfLx=cfLx
            this.jjDeptId=jjDeptId
            this.fId=rowId
            this.pId=rowPid
            this.getChudata()
            this.putgetDXList()
            this.fngetJjDeptJjx()
        },
        //新增奖金项
        addJjx(id){
            this.addOrUpdateVisible = true
            this.$nextTick(() => {
                this.$refs.addOrUpdate.init(id, this.jjDeptId);
            })
        },
        fngetJjDeptJjx(){
            getJjDeptJjx(this.jjDeptId).then(res=>{
                //console.log("奖金分配:"+JSON.stringify(res))
                this.bonusList=res.data.data
            })
        },
        putgetDXList(){
            getDXList(this.pId).then(res=>{

                this.renTable=res.data.data;
            })
        },
        getChudata(){
            jiangjinFqmxb({fId:this.fId,cfLx:this.cfLx}).then(res=>{
                //console.log("奖金项:"+JSON.stringify(res))
                this.jjList=res.data.data
                this.jjList.forEach(item=>{
                    item.checked=false
                })
            })
        },
        //不拆分
        noBreak(){
            this.checkList=[]
            this.jjList.forEach(item=>{
               if(item.checked){
                   this.checkList.push(item.id)
               }
            })
            if(this.checkList.length==0){
                this.$message.closeAll()
                this.$message.warning('请先选择不拆分哪个奖金项!')
                return false;
            }
            var ids;
            ids=this.checkList.toString()
            var parameter={
                ids:ids,
                cfLx:this.cfLx
            }
            saveNotCf(parameter).then(res=>{
                this.$message.closeAll()
                 this.$message.success('保存成功!')
                    this.getChudata()
                    this.checkList=[]
                    this.form.bonus=[]
            })
        },
        addOrUpdateHandle(){
            this.checkList=[]
            this.jjList.forEach(item=>{
               if(item.checked){
                   this.checkList.push(item.id)
               }
            })
            if(this.checkList.length==0){
                this.$message.closeAll()
                this.$message.warning('请先选择拆分哪个奖金项!')
                return false;
            }
            var ids=[],list=[],obj={}
            if(this.isZx){
                if(this.form.bonus.length>1){
                    this.$message.closeAll()
                    this.$message.warning('专项奖只能拆分一项奖金项!')
                    return false;
                }
            }
            if(this.checkList.length>0){
                this.bonusList.forEach(item=>{
                    this.form.bonus.forEach(it=>{
                        if(it==item.id){
                            obj={
                                jjxId:item.id,
                                jjxMc:item.jjxMc,
                                jjJe:0
                            }
                            list.push(obj)
                        }
                    })
                })

            }
            ids=this.checkList.toString()
            var parameter={
                jjxList:JSON.stringify(list),
                ids:ids,
                cfLx:this.cfLx
            }

             this.keepData(parameter)
        },
        keepData(parameter){
            jiangjinFqmxbSave(parameter).then(res=>{
                //console.log(JSON.stringify(res))
                if(res.data.code==0){
                    this.$message.closeAll()
                    this.$message.success('保存成功!')
                    this.getChudata()
                    this.checkList=[]
                    this.form.bonus=[]
                }

            })
        },
        changeJjx(item){
            if(item.sfZx=='是'){
                this.isZx=true
                this.jjList.forEach(n=>{
                    if(n.sfZx=='否'){
                        n.checked=false
                    }
                })

            }else{
                this.isZx=false
                this.jjList.forEach(n=>{
                    if(n.sfZx=='是'){
                        n.checked=false
                    }
                })
            }


            this.$forceUpdate()
        },
        //填写奖金金额
        changejjJe(item){
            var parameter={
                jjxList:JSON.stringify(item.cfList),
                ids:item.id,
                cfLx:this.cfLx
            }
            this.jjJe=[];
            item.cfList.forEach(item=>{
                if(item.isJjc!=1){
                    this.jjJe.push(item.jjJe)
                }

            })
            isOrNotExcess({cfLx:this.cfLx,fpid:this.fId,jjJeList:this.jjJe}).then(res=>{
                if(res.data.msg){
                    this.$message.warning(res.data.msg)
                    return false
                }else{
                    this.keepData(parameter)
                }

            })
        },
        //选择奖金
        handleCheckedCitiesChange(value){
            console.log(value)
        },
        close(){
            this.chaivisible=false;
            this.checkList=[]
            this.form.bonus=[]
            this.$emit('chaifenChild')
        },
    }
}
</script>

<style>
.jjxBox .el-checkbox__input{
    float: left;
}
.jjxBox .el-checkbox{
    float: left;
}
</style>
